<template>
    <div>
        <div class="login">
            <div class="log">
                <img :src="systemData.pic" alt="">
                <div class="logi">
                    <p class="p1">{{systemData.brandname}} | 商城</p>
                    <p class="p2">{{systemData.Advertisement}}</p>
                </div>
            </div>
            <div class="inmn">
                <div class="item ste">
                    <p class="p2 fullp">中国大陆</p>
                </div>
                <div class="item ste">
                    <p class="p2 l">+86</p>
                    <div style="width: 2px;height: 100%;background: #f5f5f5"></div>
                    <input placeholder="请输入手机号码"
                           v-model="phone"
                           class="full1"
                           type="number"
                           pattern="[0-9]*"
                           onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )'
                    >
                    <div class="statecss" v-show="statephone">
                        <p v-text="txtphone"></p>
                        <svg class="icon" aria-hidden="true">
                            <use :xlink:href="stateicon"></use>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <input placeholder="请设置新登录密码" class="full" v-model="password" type="password">
                </div>
            </div>
            <!--验证码部分-->
            <div class="inmn" style="margin-top: 2vw">
                <div class="item2">
                    <div class="int">
                        <input placeholder="请输入验证码"
                               pattern="[0-9]*"
                               type="number"
                               v-model="code"
                               maxlength="6"
                        >
                    </div>
                    <div class="r">
                        <p class="p4" :class="" @click="getCode">
                            {{codetxt}}
                        </p>
                    </div>
                </div>
            </div>
            <!--<div class="txt">-->
            <!--<p class="p3" @click="toastOn(1)">账号找回</p>-->
            <!--<p class="p3" @click="toastOn(2)">解绑手机</p>-->
            <!--</div>-->
            <div class="txt">
                <p class="p2">密码必须是字母和数字的组合并且不少于六位</p>
            </div>
            <div class="btn-db">
                <button-normal
                        widthPro="200"
                        heightPro="35"
                        textBtn="找回密码"
                        color="#fff"
                        size="14"
                        @click.native="sure"
                ></button-normal>
            </div>
        </div>
    </div>
</template>

<script>
    import API from '../request/api';
    import {Toast} from 'vant';
    import buttonNormal from '../components/common/buttonNormal';
    import ButtonNormalHollow from "../components/common/buttonNormalHollow";
    import loginStore from '@/store/login.js';
    import {sysMixin} from '@/common/mixin';

    export default {
        /**
         * 找回密码
         * */
        name: 'retrieve',
        components: {ButtonNormalHollow, buttonNormal},
        mixins: [sysMixin],
        data() {
            return {
                dealshow: false,
                phone: '',
                code: '',
                type: 3,
                password: '',
                access_token: '', // 验证码兑换过来的临时token
                statephone: false, //手机号是否不对，true为不正确
                txtphone: '', // 手机号校验文本
                stateicon: '#icon-true',// 对好还是叉号
                codetxt: '获取', // 验证码校验文本
                stateSendCode: true, //验证码是否可以发送
            };
        },
        watch: {
            // 监听具体数据变化，并做相应的处理
            phone() {
                //监听手机号来做一些现实上的处理
                let regu = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,1,3,5-8])|(18[0-9])|166|198|199|165)\d{8}$/;// 手机正则
                if (!regu.test(this.phone)) {
                    this.txtphone = '手机号不正确';
                    this.stateicon = '#icon-false';
                    this.statephone = true;
                } else {
                    this.txtphone = '可以使用';
                    this.stateicon = '#icon-true';
                    this.statephone = true;
                    // 手机号合规，然后去后台查询该手机号有没有修改过密码
                    // this.isModify();
                    // this.stateSendCode = true;
                }
            }
        },
        methods: {
            registerTo() {
                //去注册隐藏当前显示注册
                // loginStore.mutations.registerShow(loginStore.state, true);
            },
            getCode() {
                // 获取验证码方法
                if (!this.phone || this.txtphone === '手机号不正确') {
                    Toast('请先填写手机号');
                } else {
                    let data = {
                        'phone': this.phone,
                        'type': this.type // 代表登录
                    };
                    if (this.stateSendCode) {
                        this.request.post(API.getCode, data).then((res) => {
                            //    验证码发送成功
                            this.stateSendCode = false;
                            this.setTime();
                        });
                    }

                }

            },
            setTime() {
                //    倒计时
                let demo = 70;
                this.codetxt = demo;
                let setTer = setInterval(() => {
                    if (demo > 0) {
                        this.codetxt = demo;
                        demo--;
                    } else {
                        clearInterval(setTer);
                        this.codetxt = '获取';
                        this.stateSendCode = true;
                        this.txtphone = '';
                    }
                }, 1000);
            },
            sure() {
                if (!this.phone) {
                    Toast('请先填写手机号');
                } else {
                    //   没有改过密码
                    if (this.password.length > 5) {
                        if (this.code && !this.stateSendCode) {
                            //   验证码写了
                            //用验证码去换token
                            this.request.post(API.findPass, {
                                code: this.code,
                                type: this.type,
                                phone: this.phone,
                                password: this.password
                            }).then((res) => {
                                // 设置密码成功，去登录
                                Toast('您已成功找回密码');
                                this.$router.back();
                            });
                        } else {
                            Toast('请先获取并填写验证码');
                        }
                    } else {
                        Toast('请先设置新密码');
                    }
                }
            },
            deal() {
                this.dealshow = true;
            },
            toastOn(num) {
                if (num === 1) {
                    // 账号找回
                    Toast('账号找回账号找回账号找回账号找回');
                } else {
                    // 解绑手机
                    Toast('请您登录后在设置中操作');
                }
            }
        },
        beforeCreate() {
            // 可以在这加个loading事件，在加载实例时触发
            // 这个阶段实例的data、methods是读不到的
        },
        created() {
            this.phone = this.$store.state.login.phone;
            // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
            // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
            // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
        },
        beforeMount() {
            // 相关的 render 函数首次被调用。
        },
        mounted() {
            // 挂载元素，获取到DOM节点
            // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
        },
        beforeUpdate() {
            // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
        },
        updated() {
            //  如果对数据统一处理，在这里写上相应函数
        },
        beforeDestroy() {
            // 可以做一个确认停止事件的确认框
        },
        destroyed() {
            // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .login {
        position relative
        box-sizing border-box
        background #f5f5f5
        width 100vw

        .log {
            height 30vw
            flex-x(center)
            padding-top 12vh

            img {
                width vw(66)
            }

            .logi {
                height 12vw
                flex-y(space-between, flex-start)
                padding-left 3vw
            }
        }

        .inmn {
            flex-y()
            margin 0 vw(15)
            border-radius main-radius
            background grayF

            .item {
                width 100%
                height vw(55)
                flex-x()

                .l {
                    flex 1
                    text-align center
                }

                .r {
                    flex 4
                    padding-left 20vw
                    box-sizing border-box
                }

                .fullp {
                    flex 1
                    text-align center
                    line-height vw(55)
                }

                .full {
                    flex 1
                    text-align center
                    height vw(25)
                    padding vw(10) 0
                }

                .full1 {
                    flex 4
                    text-align left
                    height vw(25)
                    padding vw(10) 0 vw(10) vw(60)
                }

                .statecss {
                    position absolute
                    right vw(30)
                    flex-x()

                    .icon {
                        margin-left vw(15)
                    }

                    p {
                        word-vw(word14, main-color)
                    }
                }
            }

            .ste {
                border-bottom 1px solid gray5
            }

            .item2 {
                flex-x(space-between)
                height vw(55)
                flex-x()
                width 100%

                .int {
                    flex 4
                    flex-x()
                    padding-left vw(15)

                    input {
                        height vw(55)
                    }
                }

                .r {
                    flex 1
                    background main-color
                    border-radius 0 main-radius main-radius 0
                    height vw(55)
                    flex-x(center)
                }
            }
        }

        .txt {
            flex-x(space-between)
            padding 0 vw(15)
            margin-top 4vw

            p {
                line-height vw(28)
            }
        }

        .txt1 {
            flex-x(space-between)
            padding 0 vw(15)

            p {
                line-height vw(28)
            }
        }

        .btn-db {
            position fixed
            background white
            width 100vw
            bottom 0
        }
        @media (max-height: 400px) {
            .btn-db {
                display: none;
            }
        }

        .close {
            fill gray3
            position absolute
            right vw(20)
            arrow()
            top vw(20)
        }

        .fullInput {
            height vw(50)
            line-height vw(50)
            border-bottom 1px solid #efefef
            display flex
            justify-content space-between
            width 100%

            .pic {
                fill main-color
                width vw(20)
                height vw(20)
            }

            input {
                width 70%
            }
        }
        input:

        :placeholder {
            color gray9
        }

        .agree {
            height vw(50)
            line-height vw(50)
            display: flex;
            align-items: center;
            position relative
            color gray9

            .circle {
                border 1px solid gray6
                border-radius 50%
                width vw(15)
                height vw(15)
                box-sizing border-box
                margin-right vw(15)
            }

            .select {
                width vw(16)
                height vw(16)
                position absolute
                fill main-color
            }

            span {
                color gray3
            }
        }
    }

    .sure {
        background-color main-color
        position relative
        width 100vw
        text-align center
        height vw(50)
        line-height vw(50)
        left 0
        color grayF
    }
</style>
